import { Button, Image } from "antd"
import { TestChapterEntity, TestEntity, TestGroupEntity } from "../../../../queries/test"
import { joinPath } from "../../../../libs/http-fetch"
import { useSearchParams } from "react-router"


interface ChapterInfoProps {
  chapter?: TestChapterEntity,
  test?: TestEntity,
  group?: TestGroupEntity
}
const ChapterInfo = ({
  // chapter,
  test,
  group
}: ChapterInfoProps) => {
  const [params, setParams] = useSearchParams()
  const testType = params.get("testType") || "practice"
  if (!group) return null
  return (
    <div className="bg-white">
      <div className="flex gap-2">
        <div className="h-24 flex items-center">
          <Image
            src={joinPath(`/media/test/${test?.id}/cover`)}
            width={100}
          />
        </div>
        <div className="h-24 flex items-center text-xl">
          {group?.name} - {test?.name}
        </div>
      </div>
      <div
        className="flex gap-2 justify-end mb-1"
      >
        <Button
          type={testType === "practice" ? "primary" : "default"}
          onClick={() => {
            setParams({
              ...params,
              testType: "practice"
            })
          }}
        >
          考试模式
        </Button>
        <Button
          type={testType === "browse" ? "primary" : "default"}
          onClick={() => {
            setParams({
              ...params,
              testType: "browse"
            })
          }}
        >
          浏览模式
        </Button>
      </div>
    </div>
  )
}

export default ChapterInfo